<!-- 自定义一个箱子 -->
<template>
  <div class="flow_box">
    <div class="flow_box_item" v-for="(item,index) in data"
         :style="{'width': (100/props.config.width) + '%',
    }">
      <div class="flow_box_item_main" :style="{
         'background-image':'url('+props.config.bg+')',
         'background-repeat': 'no-repeat',
         'background-size': '100% 100%',
         'height':'10vh'}">
        <div class="flow_box_img">
          <el-image :src="props.config.icon[index]"></el-image>
        </div>
        <div class="flow_box_content">
          <div class="flow_box_item_num sword">
            {{item.num}}<span>{{item.unit}}</span>
          </div>
          <div class="flow_box_item_car">{{item.title}}</div>
        </div>
      </div>
      </div>
  </div>
</template>

<script setup>
import {CountTo} from 'vue3-count-to';
//从父组件传值过来
const props = defineProps({
  config: Object,
  data: Array
})
</script>

<style scoped>
.flow_box{
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1vh;
  font-size: 2vh;
  position: relative;
  margin-top: 1.5vh;
  .flow_box_item{
    width: 33.333%;
    .spot{
      width: 1vh;
      height: 1vh;
      border-radius: 1vh;
    }
    .flow_box_item_main{
      margin: 1vh;
      padding: 1vh;
      display: flex;
      flex-wrap: wrap;
      align-content: center;
      .flow_box_content{
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
        padding-left: 1vh;
        .flow_box_item_num{
          font-weight: bold;
          span{
            font-size: 1.2vh;
            padding-left: 0.5vh;
          }
        }
        .flow_box_item_car{
          font-size: 1.3vh;
          padding-top: 5px;
        }
      }
    }
  }
}
:deep(.el-image){
  top: 1vh;
}
</style>
